<template>
	<view class="top-box flex_sbc">
		<view class="z-font-44 text-w">学员</view>
		<view class="z-font-32 text-w uni-585C66">{{ page.total }}人</view>
	</view>
	<view class="flex_sbc search-box">
		<view class="flex_fsc input-box">
			<uni-icons type="search" size="16" class="uni-mr-16"></uni-icons>
			<input
				type="text"
				placeholder="搜索学员名称"
				placeholder-class="uni-placeholder"
				confirm-type="search"
				@confirm="searchData"
			/>
		</view>
		<!-- <navigator
      url="/pages/player/screening/screening"
      animation-type="fade-in"
      class="flex_cc screening-box"
      hover-class="none"
    >
      <view>筛选</view>
      <image :src="setting.oss_pub_domain + '/app-img/player/icon_screening.png'" class="screening-icon"></image>
    </navigator> -->
	</view>
	<view v-if="dataList && dataList.length" class="list-content">
		<navigator
			v-for="item in dataList"
			:key="item.id"
			:url="`/pages/player/details/details?id=${item.id}`"
			hover-class="none"
		>
			<view class="flex_fsc list-item">
				<image class="user-head" :src="setting.oss_pub_domain + item.avatar"></image>
				<view class="width-100">
					<view class="flex_sbc">
						<view class="flex_fsc">
							<view class="text-w uni-mr-16">{{ item.name }}</view>
							<view v-if="item.career" class="user-tag">{{ item.career }}</view>
						</view>
						<view
							class="in-training"
							:class="item.studyStatus == 1 ? 'uni-color-main-bg uni-white' : 'uni-extra-color-bg uni-white'"
						>
							{{ item.studyStatus == 1 ? '在训' : '停训' }}
						</view>
					</view>
					<view class="flex_sbc uni-color-grey z-font-24 uni-mt-12">
						<view>{{ gc.score[item.score] && gc.score[item.score].label }}</view>
						<view>{{ item.studentId ? '已绑定' : '未绑定' }}</view>
					</view>
				</view>
			</view>
		</navigator>
	</view>
	<z-no-data v-else placeholder="暂无学员" width="400"></z-no-data>
	<view class="add-player flex_cc" @click="addPlayer">
		<uni-icons type="clear" size="22" color="#FFFFFF" class="add-icon"></uni-icons>
		<view class="uni-white uni-ml-8">新增球员</view>
	</view>
</template>

<script setup>
import { globalConfigStore } from '@/stores/index.js';
import { getPlayerList } from '@/api/player.js';
import { onShow, onReachBottom, onPullDownRefresh } from '@dcloudio/uni-app';
import { ref, reactive, getCurrentInstance } from 'vue';

const { proxy: that } = getCurrentInstance();
const gc = globalConfigStore();

const dataList = ref([]),
	page = reactive({
		num: 1,
		size: 20,
		total: 0,
		loading: true,
		name: ''
	});
onShow(() => {
	page.num = 1
	page.name = ''
	fetchData();
})
function fetchData() {
	page.loading = true
	const param = { pageNum: page.num, pageSize: page.size }
	if (page.name) param.name = page.name
	getPlayerList(param).then((res) => {
		if (page.num === 1) dataList.value = res.rows;
		else dataList.value.push(...res.rows);
		page.total = res.total;
		page.loading = false
		uni.stopPullDownRefresh()
	});
}
function searchData(name) {
	page.name = name.detail.value
	page.num = 1;
	fetchData();
}

function addPlayer() {
	uni.setStorageSync('player-profile', '');
	uni.navigateTo({
		url: '/pages/player/add/add',
		events: {
			done(data) {
				page.num = 1;
				fetchData();
			}
		}
	});
}

onPullDownRefresh(() => {
	page.name = ''
	page.num = 1
	fetchData()
})
onReachBottom(() => {
	if (dataList.value.length >= page.total) return;
	page.num += 1;
	fetchData();
});
</script>

<style lang="scss">
@import 'index.scss';
</style>